<template>
  <el-card shadow="never" class="card-border-none">
    <!-- 新增、刷新 -->
    <list-header
      :permissions="{
        create: 'createRule,POST',
        refresh: 'getRuleList,GET',
      }"
      @create="handleCreate"
      @refresh="getData"
    ></list-header>

    <!-- 表格 -->
    <el-tree
      id="list-table"
      :data="tableData"
      :props="{ children: 'child', label: 'name' }"
      @node-click="() => {}"
      :expand-on-click-node="false"
      :default-expanded-keys="defaultExpandedKeys"
      node-key="id"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <el-tag :type="data.menu ? 'primary' : 'info'" size="small">
            {{ data.menu ? "菜单" : "权限" }}
          </el-tag>
          <el-icon :size="16" v-if="data.icon" class="custom-tree-node-icon">
            <component :is="data.icon"></component>
          </el-icon>
          <span class="custom-tree-node-label">{{ node.label }}</span>
          <span class="custom-tree-node-span">
            <el-switch
              v-permission="['updateRuleStatus,POST']"
              @change="handleStatusChange($event, data)"
              :active-value="1"
              :inactive-value="0"
              :model-value="data.status"
              class="span-pubilc"
            ></el-switch>
            <el-button
              v-permission="['updateRule,POST']"
              class="span-pubilc"
              link
              type="primary"
              size="small"
              @click="handleEdit(data)"
              >修改</el-button
            >
            <el-button
              v-permission="['createRule,POST']"
              class="span-pubilc"
              link
              type="primary"
              size="small"
              @click="addChild(data.id)"
              >增加</el-button
            >
            <el-popconfirm
              title="是否要删除该记录？"
              @confirm="handleDelete(data.id)"
              confirm-button-text="是"
              cancel-button-text="否"
            >
              <template #reference>
                <el-button
                  v-permission="['deleteRule,POST']"
                  link
                  type="primary"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </span>
        </div>
      </template>
    </el-tree>

    <!-- 新增、修改表单 -->
    <form-drawer
      ref="formDrawerRef"
      :title="drawerTitle"
      @submit="handleSubmit"
      :showActions="true"
      :destroyOnClose="true"
    >
      <el-form
        :model="form"
        ref="formRef"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="default"
      >
        <el-form-item label="上级菜单">
          <el-cascader
            placeholder="请选择上级菜单"
            v-model="form.rule_id"
            :options="options"
            :props="{
              value: 'id',
              label: 'name',
              children: 'child',
              emitPath: false,
              checkStrictly: true,
            }"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="菜单/规则">
          <el-radio-group v-model="form.menu">
            <el-radio :value="1" border>菜单</el-radio>
            <el-radio :value="0" border>规则</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="form.name"
            placeholder="名称"
            style="width: 30%"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单图标">
          <icon-select v-model="form.icon"></icon-select>
        </el-form-item>
        <el-form-item label="前端路由路径" v-if="form.menu && form.rule_id > 0">
          <el-input
            v-model="form.frontpath"
            placeholder="前端路由path"
          ></el-input>
        </el-form-item>
        <el-form-item label="后端规则" v-if="!form.menu" prop="condition">
          <el-input v-model="form.condition" placeholder="后端规则"></el-input>
        </el-form-item>
        <el-form-item label="请求方式" v-if="!form.menu">
          <el-select v-model="form.method" placeholder="请选择请求方式">
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
            <el-option label="PUT" value="PUT"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="form.order"
            :min="0"
            :max="1000"
          ></el-input-number>
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup>
import { ref } from "vue";
import ListHeader from "~/components/ListHeader.vue";
import { useInitTable, useInitForm } from "~/composables/useCommon.js";
import FormDrawer from "~/components/FormDrawer.vue";
import IconSelect from "~/components/IconSelect.vue";
import {
  createRule,
  updateRule,
  getRuleList,
  deleteRule,
  updateRuleStatus,
} from "~/api/rule";

// 权限菜单选项
const options = ref([]);
// 默认展开
const defaultExpandedKeys = ref([]);
const { tableData, getData, handleDelete, handleStatusChange } = useInitTable({
  // 获取数据的方法
  getList: getRuleList,
  success: (res) => {
    tableData.value = res.list;
    options.value = res.rules;
    defaultExpandedKeys.value = res.list.map((o) => o.id);
  },
  // 删除api
  deleteData: deleteRule,
  // 修改api
  updateStatus: updateRuleStatus,
});

// 初始化表格
const {
  drawerTitle,
  form,
  formRef,
  rules,
  formDrawerRef,
  handleSubmit,
  handleCreate,
  handleEdit,
} = useInitForm({
  // 表单初始数据
  form: {
    id: null,
    menu: 0,
    rule_id: 0,
    name: "",
    status: 1,
    frontpath: "",
    desc: "",
    condition: "",
    icon: "",
    method: "GET",
    order: 50,
  },
  // 表单验证规则
  rules: {
    name: [
      {
        required: true,
        message: "名称不能为空",
        trigger: "blur",
      },
    ],
    condition: [
      {
        required: true,
        message: "后端规则不能为空",
        trigger: "blur",
      },
    ]
  },
  // 获取数据方法
  getData,
  // 新增数据api
  createData: createRule,
  // 修改数据api
  updateData: updateRule,
});

// 添加子分类
const addChild = (rid) => {
  handleCreate();
  form.rule_id = rid;
  form.status = 1;
};
</script>
<style lang="scss" scoped>
.card-border-none {
  border: none;
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    .custom-tree-node-icon {
      margin-left: 8px;
    }
    .custom-tree-node-label {
      margin-left: 8px;
    }
    .custom-tree-node-span {
      margin-left: auto;
      .span-pubilc {
        margin-right: 18px;
      }
    }
  }
}
:deep(.el-card__body) {
  background: #fff;
  border-radius: 4px;
}
:deep(.el-tree-node__content) {
  padding: 8px 0;
}
</style>